<template>
	<view class="content">
		<view class="topBox">
			<view class="toolBox">
				<view class="lBox">
					<uni-icons type="calendar" size="30" color="#fff"></uni-icons>
					<view>签到</view>
				</view>
				<view class="rBox">
					<uni-icons type="gear" size="30" color="#fff"></uni-icons>
					<uni-icons type="chat" size="30" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="infoBox">
				<view class="u-top" @click="setFn">
					<template v-if="!userInfo.nickName">
						<image src="../../static/tt.jpg" mode="aspectFill"></image>
						<view class="tit">
							注册 / 登录
						</view>
					</template>
					<template v-else>
						<image :src="userInfo.avatarUrl" mode="aspectFill"></image>
						<view class="tit">
							{{userInfo.nickName}}
						</view>
					</template>
				</view>
				<view class="u-bottom">
					<view class="item">
						<view class="num">
							12
						</view>
						<view class="itemName">
							点赞
						</view>
					</view>
					<view class="item">
						<view class="num">
							12
						</view>
						<view class="itemName">
							点赞
						</view>
					</view>
					<view class="item">
						<view class="num">
							12
						</view>
						<view class="itemName">
							点赞
						</view>
					</view>
					<view class="item">
						<view class="num">
							12
						</view>
						<view class="itemName">
							点赞
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="listBox">
			<uni-list>
				<uni-list-item  title="列表文字" ></uni-list-item>
				<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
			</uni-list>
		</view>
		
		
		<up-popup closeable :show="show" @close="close" round="20">
			<view class="popup">
				<view class="title">
					获取您的昵称、头像
				</view>
				<view class="flex">
					<view class="label">
						获取用户头像：
					</view>
					<button class="avatar-warpper" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
						<image class="avatar" :src="userInfo.avatarUrl"></image>
					</button>
				</view>
				<view class="flex">
					<view class="label">
						获取用户昵称：
					</view>
					<input @input="changeName" type="nickname" />
				</view>
				<button size="default" type="primary" @click="userSubmit">确定</button>

			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		login,
		getUserInfo
	} from '../../api/api.js'
	const userInfo = reactive({
		nickName: '',
		avatarUrl: ''
	})
	const setFn = () => {
		if(uni.getStorageSync('userInfo')){
			show.value = true
			return
		}
		// 给用户一个确认提醒
		uni.showModal({
			title: '温馨提醒',
			content: '亲，授权登录成功后才能正常使用小程序',
			success(res) {
				if (res.confirm) {
					// uni.getUserProfile({
					// 	desc: "获取用户头像和昵称",
					// 	success(res) {
					// 		console.log(res, 'success')
					// 	},
					// 	fail(err) {
					// 		console.log(err, 'fail')
					// 	}
					// })
					uni.login({
						success: async (data) => {
							console.log('=====>',data)
							const { token } = await login(data.code)
							console.log('token=====>',token)
							uni.setStorageSync('token',token)
							const {
								avatarUrl,
								nickName
							} = await getUserInfo()
							userInfo.avatarUrl = avatarUrl;
							userInfo.nickName = nickName
							show.value = true
						}
					})
				}else{
					uni.showToast({
						title:'你取消登录',
						icon:'none'
					})
				}
			}
		})
	}

	// 弹出层控制
	const show = ref(false)
	const close = () => {
		show.value = false
	}
	const onChooseavatar = (e) => {
		console.log('e=>',e.detail)
		userInfo.avatarUrl = e.detail.avatarUrl
	}
	const changeName = (e) => {
		userInfo.nickName = e.detail.value
	}
	const userSubmit = () => {
		uni.setStorageSync('userInfo',JSON.stringify(userInfo))
		show.value = false
	}
	onLoad(async ()=>{
		// 免登录逻辑
		if(uni.getStorageSync('token') && !uni.getStorageSync('userInfo')){
			const {avatarUrl,nickName} = await getUserInfo()
			userInfo.avatarUrl = avatarUrl;
			userInfo.nickName = nickName
		}else if(uni.getStorageSync('token') && uni.getStorageSync('userInfo')){
			const {avatarUrl,nickName} = JSON.parse(uni.getStorageSync('userInfo'))
			userInfo.nickName = nickName;
			userInfo.avatarUrl = avatarUrl
		}
	})
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;

		.topBox {
			height: 400rpx;
			position: relative;

			&:after {
				content: '';
				width: 100vw;
				height: 400rpx;
				background: #00aaff;
				border-radius: 0 0 30rpx 30rpx;
				position: absolute;
				top: -100rpx;
				z-index: -1;
			}

			.toolBox {
				margin: 50rpx 20rpx;
				height: 30rpx;
				display: flex;
				justify-content: space-between;

				.lBox {
					display: flex;
					align-items: center;
					color: #fff;
				}

				.rBox {
					display: flex;
					align-items: center;
					color: #fff;
				}
			}

			.infoBox {
				height: 280rpx;
				margin: 50rpx 20rpx 50rpx;
				background: #fff;
				border-radius: 15rpx;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				padding: 30rpx;
				box-sizing: border-box;

				.u-top {
					display: flex;
					align-items: center;

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
						margin-right: 20rpx
					}

					.tit {
						font-size: 30rpx;
						font-weight: bold;
					}
				}

				.u-bottom {
					display: flex;
					justify-content: space-around;
					margin-top: 30rpx;
					text-align: center;

					.num {
						font-size: 32rpx;
						font-weight: bold;
					}

					.itemName {
						font-size: 30rpx;
					}
				}
			}
		}

		.popup {
			padding: 20rpx;
			border-radius: 20rpx 20rpx 0 0;

			.title {
				margin-bottom: 20rpx;
				font-size: 40rpx;
				text-align: center;
			}

			.flex {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1px solid #f5f5f5;
				padding: 24rpx 0;
			}

			image {
				width: 70rpx;
				height: 70rpx;
			}

			.avatar-warpper{
				border: none;
				border-radius: 10rpx;
				width: 70rpx;
				height: 70rpx;
				margin-left: 20rpx;
				padding: 0
			}
		}
	}
</style>